import React, { Component } from 'react';
import './App.css';
import Menu from './components/menu';
import MenuItem from './components/meunItem';
import SubMenu from './components/subMenu';
import {NavLink} from 'react-router-dom';

/**
 * 1.context  Provider Consumer
 * 
 * 2.eventBus  发布订阅模式 
 * 
 * 1>父--->子   props  html片段 ： 子组件 props.children 获取
 * 
 * 2>子 --->父  事件
 * 
 * 3>非父子     redux   eventBus
 * 
 * 4>祖先--->子孙  Provider Consumer
 * 
*/

class App extends Component {
    componentDidMount(){
        
    }
    render() {
       
        return (
            <div className="wrap">
                <div className="left">
                    <Menu
                        defaultSelectedKeys={['1']}
                        defaultOpenKeys={['sub2','sub1']}
                        onClick={this.clickMenuItem}
                    >
                        <MenuItem key="1" keyId="1">
                            <NavLink to="/food">option1</NavLink>
                        </MenuItem>
                        <MenuItem key="2" keyId="2">
                            option2
                        </MenuItem>
                        <MenuItem key="3" keyId="3">
                            option3
                        </MenuItem>
                        <SubMenu key="sub1" keyId="sub1" title="sub1">
                            <MenuItem key="5"  keyId="5">
                                option5
                            </MenuItem>
                            <MenuItem key="6" keyId="6">
                                option6
                            </MenuItem>
                            <MenuItem key="7" keyId="7">
                                option7
                            </MenuItem>
                        </SubMenu>
                        <SubMenu key="sub2" keyId="sub2" title="sub2">
                            <MenuItem key="8" keyId="8">
                                option8
                            </MenuItem>
                            <MenuItem key="9" keyId="9">
                                option9
                            </MenuItem>
                            <MenuItem key="10" keyId="10">
                                option10
                            </MenuItem>
                        </SubMenu>
                    </Menu>  
                </div>      
                <div className="right">
                    
                </div>
            </div>
        );
    }

    //点击menuItem
    clickMenuItem = (keyId:string) => {
        console.log("点击menuItem",keyId)
    }
}

export default App